<template>
  <div class="supresulttitle"></div>
  <div class="noiseownership-title1">
        <div class="tl1">部门</div>
        <div class="tl2">累计件数</div>
        <div class="tl3">当年累计</div>
        <div class="tl4">当月累计</div>
    </div>
    <div class="noiseownership-content">
        <div class="item" v-for="(item,index) in list" :key="index">
            <div class="tl1">{{ item.name }}</div>
            <div class="tl2">{{ item.num }}</div>
            <div class="tl3">{{ item.num1 }}</div>
            <div class="tl4">{{ item.num2 }}</div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
let list = ref([
    {name:'县交通运输委',num:'592',num1:'843',num2:'626'},
    {name:'县生态环境局',num:'946',num1:'320',num2:'892'},
    {name:'县住房城乡建委',num:'677',num1:'794',num2:'715'},
    {name:'县文化旅游委',num:'831',num1:'520',num2:'779'},
    {name:'县港航海事事务中心',num:'791',num1:'240',num2:'962'},
    {name:'县交通运输委',num:'592',num1:'843',num2:'626'},
    {name:'县生态环境局',num:'946',num1:'320',num2:'892'},
    {name:'县住房城乡建委',num:'677',num1:'794',num2:'715'},
    {name:'县文化旅游委',num:'831',num1:'520',num2:'779'},
    {name:'县港航海事事务中心',num:'791',num1:'240',num2:'962'},
])
</script>

<style lang="less" scoped>
.supresulttitle {
  width: 100%;
  height: 36px;
  margin-top: 9px;
  background-image: url("../../../assets/fengjie/icon17.png");
  background-size: 100% 100%;
}
.noiseownership-title1{
    width: 100%;
    height: 28px;
    background: rgba(2, 49, 100, .2);
    margin-top: 12px;
    box-sizing: border-box;
    padding: 0 0 0 12px;
    display: flex;
    align-items: center;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    font-size: 12px;
    color: #159AFF;
    .tl1{
        flex: 1;
    }
    .tl2{
        width: 120px;
    }
    .tl3{
        width: 120px;
    }
    .tl4{
      width: 120px;
    }
}
/* 隐藏滚动条轨道 */
.noiseownership-content::-webkit-scrollbar {
    display: none; /* 对于Chrome和Safari */
}
.noiseownership-content{
    width: 100%;
    height: 180px;
    overflow-y: scroll;
    .item{
        width: 100%;
        height: 32px;
        margin-top: 4px;
        font-family: PingFangSC-SNaNpxibold;
        font-weight: 600;
        font-size: 12px;
        color: #D0DEEE;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        padding: 0 0 0 12px;
        .tl1{
          flex: 1;
        }
        .tl2{
          width: 120px;
        }
        .tl3{
          width: 120px;
        }
        .tl4{
          width: 120px;
        }
    }
    .item:nth-child(odd){
        background: rgba(71, 138, 138, 0);
        box-shadow: inset 0 -1px 0 0 rgba(108, 128, 151, 0.5);
    }
    .item:nth-child(even){
        background: rgba(71, 107, 138, 0.1);
        box-shadow: inset 0 -1px 0 0 rgba(108, 128, 151, 0.5);
    }
}
</style>
